<template>
  <div class="screen-block">
    <Title>地区销量趋势</Title>
    <div style="width: 100%; height: 90%">
      <v-chart :option="option"></v-chart>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import * as echarts from 'echarts'
import Title from '../Title.vue'

const data = [
  {
    name: "上海",
    data: [
      "155.13",
      "134.54",
      "124.54",
      "122.16",
      "129.56",
      "155.13",
      "127.12",
      "124.54",
      "122.16",
      "129.56",
      "129.56",
      "129.56",
    ]
  },
  {
    name: "北京",
    data: [
      "155.13",
      "127.12",
      "124.54",
      "122.16",
      "129.56",
      "155.13",
      "127.12",
      "124.54",
      "122.16",
      "129.56",
      "129.56",
      "129.56",
    ]
  },
  {
    name: "杭州",
    data: [
      "155.13",
      "127.12",
      "124.54",
      "122.16",
      "129.56",
      "155.13",
      "127.12",
      "124.54",
      "122.16",
      "129.56",
      "129.56",
      "129.56",
    ]
  },
  {
    name: "深圳",
    data: [
      "155.13",
      "127.12",
      "124.54",
      "122.16",
      "129.56",
      "155.13",
      "127.12",
      "124.54",
      "122.16",
      "129.56",
      "129.56",
      "129.56",
    ]
  }
]

// 2.构建options配置对象
const option = ref({
  grid: {
    top: "25%",
    right: "4%",
    bottom: "1%",
    left: "3%",
    containLabel: true
  },
  tooltip: {
    trigger: "axiss"
  },
  legend: {
    left: 20,
    top: "8%",
    icon: "circle",
    data: data.map((item) => item.name),
    textStyle: {
      color: "#aaa"
    }
  },
  xAxis: {
    type: "category",
    data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
    boundaryGap: false
  },
  yAxis: {
    type: "value"
  },
  series: getSerice()
})

function getSerice() {
  // 半透明的颜色值
  const colorArr1 = [
    "rgba(11, 168, 44, 0.5)",
    "rgba(44, 110, 255, 0.5)",
    "rgba(22, 242, 217, 0.5)",
    "rgba(254, 33, 30, 0.5)",
    "rgba(250, 105, 0, 0.5)",
  ];
  // 全透明的颜色值
  const colorArr2 = [
    "rgba(11, 168, 44, 0)",
    "rgba(44, 110, 255, 0)",
    "rgba(22, 242, 217, 0)",
    "rgba(254, 33, 30, 0)",
    "rgba(250, 105, 0, 0)",
  ];

  const seriesArr = data.map((item, index) => {
    return {
      name: item.name,
      type: "line",
      data: item.data,
      lineStyle: {
        width: 3
      },
      itemStyle: {
        borderWidth: 4,
      },
      symbol: "circle",
      smooth: true,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: colorArr1[index]
          },
          {
            offset: 1,
            color: colorArr2[index]
          }
        ])
      }
    }
  })
  return seriesArr
}

</script>

<style scoped lang="scss">
.screen-block {
  width: 100%;
  height: 100%;
}
</style>